<template>
  <div>
    <el-breadcrumb separator-class="el-icon-arrow-right">
      <el-breadcrumb-item :to="{ path: '/Main' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item>商品管理</el-breadcrumb-item>
      <el-breadcrumb-item>商品列表</el-breadcrumb-item>
    </el-breadcrumb>
    <el-card>
      <el-row>
        <el-col :span='7'>
          <el-input placeholder="请输入内容" v-model='goodForm.query' clearable class="input-with-select" @clear='getData' >
            <el-button slot="append" icon="el-icon-search" @click='getData'></el-button>
          </el-input>
        </el-col>
        <el-col :span='4'>
          <el-button class='add-button' type="primary" @click='addGood'>添加商品</el-button>
        </el-col>
      </el-row>
      <el-table :data='goodData' border style='width:100%'>
        <el-table-column label='#' type='index'></el-table-column>
        <el-table-column label='商品名称' prop='goods_name'></el-table-column>
        <el-table-column label='商品价格(元)' prop='goods_price' width='110'></el-table-column>
        <el-table-column label='商品重量' prop='goods_weight' width='80'></el-table-column>
        <el-table-column label='创建时间' prop='add_time' width='110'></el-table-column>
        <el-table-column label='操作' width='120'>
          <template #default=scope>
            <el-button type="primary" size='mini' icon="el-icon-edit"></el-button>
            <el-button type="danger" size='mini' icon="el-icon-delete" @click='deleteGood(scope.row.goods_id)'></el-button>
          </template>
        </el-table-column>
      </el-table>
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page='goodForm.pagenum'
        :page-sizes="[20, 40, 60, 80]"
        :page-size="goodForm.pagesize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total">
      </el-pagination>
    </el-card>
    
  </div>
</template>

<script>
export default {
  data() {
    return {
      goodForm:{
        query:'',
        pagenum:1,
        pagesize:20
      },
      total:0,
      goodData: [],
      
    }
  },
  methods: {
    async getData() {
      let res = await this.axios.get('goods', { params:this.goodForm })
      if( res.meta.status !== 200 ) return this.pop.error( res.meta.msg )
      this.goodData = res.data.goods
      this.total = res.data.total
    },
    handleSizeChange( size ) {
      this.goodForm.pagesize = size
      this.getData()
    },
    handleCurrentChange( num ) {
      this.goodForm.pagenum = num
      this.getData()
    },
    addGood() {
      this.$router.push('goods/add')
    },
    async deleteGood( id ) {
      let rel = await this.confirm('此操作将永久删除该商品, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).catch(err => err)
      if( rel !== 'confirm' ) return this.pop('取消删除')
      let res = await this.axios.delete(`goods/${ id }`)
      if( res.meta.status !== 200 ) return this.pop.error( res.meta.msg )
      this.pop.success( res.meta.msg )
      this.getData()
    },

  },
  created() {
    this.getData()
  }
}
</script>

<style scoped>
.add-button {
  margin-left: 15px;
}
</style>